<template>
  <div>
    <el-dialog title="选择充值商品" :visible="visible" append-to-body :close-on-click-modal="false"  :before-close="dialogClose" width="680px">
      <el-form :inline="true" :model="formData" >
        <el-form-item>
          <el-input  v-model="formData.id" style="width: 100px;" placeholder="ID" clearable size="small"/>
        </el-form-item>
        <el-form-item>
          <el-input  v-model="formData.name" style="width: 200px;" placeholder="商品名称" clearable size="small"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchGoods" size="small">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        :row-key="(row) => row.id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
            :reserve-selection="true"
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="ID" width="80" prop="id" />
        <el-table-column label="商品名称"    prop="name" />
        <el-table-column label="售价"    prop="sellPrice" />
      </el-table>
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose" size="small">取 消</el-button>
        <el-button type="primary" @click="handleSelectSave" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '@/api/Api.js'
export default {
  name: 'select-partner-goods',
  props:{
    visible: {
      type: Boolean
    },
    selectedId:{
      type:String
    },
  },
  data() {
    return {
      currentPage:1,
      pageSize:10,
      total:0,
      tableData: [],
      curSelectId:'',
      multipleSelection: [],
      formData:{
        id:'',
        name:''
      }
    }
  },
  watch:{
    visible(newVal){
      if (newVal){
        this.fetchData();
      }
    },
    selectedId:{
      handler(val){
        this.curSelectId = val;
      },
      immediate:true
    }
  },
  methods: {
    searchGoods(){
      this.fetchData(this.formData);
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
      var selectIdArray = this.multipleSelection.map(item => item.id);
      this.selectedId = selectIdArray.join(",");

    },
    dialogClose(){
      this.multipleSelection = [];
      this.$emit('dialog-close', true);
    },
    handleSizeChange(val){
      if (val == this.pageSize) return;
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.fetchData();
    },
    handleSelectSave() {
      this.$emit("transferGoods", this.multipleSelection);
      this.dialogClose();
      this.multipleSelection = [];
      this.curSelectId = '';
    },
    fetchData(formData={}){
      this.multipleSelection = [];
      Api.getMemberChargeGoodsList({pageNo: this.currentPage, pageSize: this.pageSize,...formData}).then(res => {
        if (res.success) {
          this.total = res.data.total;
          this.tableData = res.data.records;
          var selectIdArray = this.curSelectId.split(",");
          if(selectIdArray.length > 0){
            console.log(selectIdArray);
            this.tableData.forEach((item,index)=>{
              var filterArray = selectIdArray.filter(itemKey => itemKey == item.id);
              console.log(filterArray);
              console.log(item.id)
              if(filterArray.length>0){
                this.multipleSelection.push({id:item.id});
                this.$refs.multipleTable.toggleRowSelection({id:item.id})
              }
            })
          }

        } else {
          return this.$message.error('获取会员充值列表失败')
        }
      })
    }
  }
}
</script>

<style  scoped>

</style>
